<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css">
	<style>
		body {
			padding: 20px;
		}

		.loading-box {
			position: fixed;
			top: 30%;
			left: 50%;
			transform: translateX(-50%);
			background-color: rgba(0, 0, 0, 0.1);
			border-radius: 10px;
			box-shadow: 1px 1px 3px #efefef;
			display: none;
		}
	</style>
</head>

<body>
	<!-- 按钮 -->
	<button class="btn btn-primary" id="btnGET">GET</button>
	<button class="btn btn-info" id="btnPOST">POST</button>
	<button class="btn btn-warning" id="btnBooks">获取图书列表数据</button>

	<!-- loading 区域 -->
	<div class="loading-box">
		<div class="spinner-border m-5 text-primary" role="status">
			<span class="sr-only">Loading...</span>
		</div>
	</div>

	<script src="./lib/jquery-v3.6.0.js"></script>
	<script src="./lib/axios.js"></script>
	<!-- 定义拦截器：学习完拦截器，并不能用他解决问题，后面会有具体应用; -->
	<script>
		// 请求拦截器 - 显示loadding效果
		axios.interceptors.request.use(function (config) {
			// config: 所有的ajax参数都在这参数中(method,url,params,data...)
			console.log(config);
			// 显示loadding效果
			document.querySelector('.loading-box').style.display = 'block'
			// 必须返回
			return config;
		}, function (error) {
			// 固定语法 - 请求未能正常发送出去怎么处理
			return Promise.reject(error);
		});

		// 响应拦截器 - 隐藏loadding效果
		axios.interceptors.response.use(function (response) {
			// 响应对象，里面有六个属性，最常用的是 data
			console.log(response);
			// 隐藏loadding效果
			document.querySelector('.loading-box').style.display = 'none'
			// 一定要返回 response
			return response;
		}, function (error) {
			// 固定语法 - 请求未能正常发送出去怎么处理
			return Promise.reject(error);
		});
		
	</script>
	<script>
		// 配置请求根路径
		axios.defaults.baseURL = 'http://www.liulongbin.top:3009'

		// 点击按钮，发起 GET 请求
		document.querySelector('#btnGET').addEventListener('click', function () {
			axios.get('/api/get').then(function (res) {
				console.log(res.data)
			})
		})

		// 点击按钮，发起 POST 请求
		document.querySelector('#btnPOST').addEventListener('click', function () {
			axios.post('/api/post', { name: 'zs' }).then(function (res) {
				console.log(res.data)
			})
		})

		document.querySelector('#btnBooks').addEventListener('click', function () {
			axios.get('/api/getbooks').then(function (res) {
				console.log(res.data)
			})
		})
	</script>
</body>

</html>